<template>

  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline" style="margin-bottom: 5px;">
          <a-row :gutter="48">
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="商品ID">
                <a-input v-model="search.goodId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="商品名">
                <a-input v-model="search.goodName"></a-input>
              </a-form-item>
            </a-col>
            <a-col   :md="12" :xs="24">
              <a-form-item label="查询时间段">
                <a-date-picker valueFormat="YYYY-M-D" :value="search.before" @change="onBeforeTimeChange"/> ~
                <a-date-picker valueFormat="YYYY-M-D" :value="search.after" @change="onAfterTimeChange" />
              </a-form-item>
            </a-col>
            <!--            <a-col :xl="6" :lg="8" :md="12" :xs="24">-->
            <!--              <a-form-item label="商品状态">-->
            <!--                <a-select :default-value="null" @change="handleUserState">-->
            <!--                  <a-select-option :value="null">-->
            <!--                    全部-->
            <!--                  </a-select-option>-->
            <!--                  <a-select-option :value="1">-->
            <!--                    使用中-->
            <!--                  </a-select-option>-->
            <!--                  <a-select-option :value="0">-->
            <!--                    已禁用-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="每页条数">
                <a-select :default-value="10" @change="handlePageSize">
                  <a-select-option :value="value" v-for="value in pageSizeSelect" :key="value">
                    {{ value }}条/页
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-button type="primary" @click="handleTableChange">查询</a-button>
              <a-button type="primary" @click="getExcel" style="margin-left: 10px;">导出</a-button>
            </a-col>
          </a-row>
        </a-form>


        <a-table :pagination="pagination" bordered
                 :data-source="data" :loading="loading"
                 size="small" :columns="columns"
                 @change="handleTableChange"
        >
        </a-table>
      </a-card>
    </div>
  </page-header-wrapper>

</template>

<script>
import {searchGoodDataByPage} from "@/api/modules/GoodDataRequest";
import AutoCharts from "@/components/AutoCharts";

const columns = [
  {
    title: '商品ID',
    dataIndex: 'goodId',
  },
  {
    title: '商品名',
    dataIndex: 'goodName',
  },
  {
    title: '转化率',
    dataIndex: 'convertRate',
  },
  {
    title: '已下单商品数量',
    dataIndex: 'orderGoodsNum',
  },
  {
    title: '已下单销售额',
    dataIndex: 'orderSale',
  },
  {
    title: '规格ID',
    dataIndex: 'specificationId',
  },
  {
    title: '访问量',
    dataIndex: 'visitNum',
  },
  {
    title: '访问占比',
    dataIndex: 'visitRate',
  }
]

export default {
  name: "GoodData",
  components: {AutoCharts},
  data() {
    return {
      search: {
        before:null,
        after:null
      },
      typeTreeList: [],
      typeMap: new Map(),
      data: [],
      columns: columns,
      loading: true,
      pagination: {
        pageSize: "10",
        current: 1,
        total: 0
      },
      pageSizeSelect: [
        '5', '10', '20', '50', '100'
      ],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.handleTableChange({
        current: 1
      });
    },
    async handlePageSize(value) {
      this.pagination.pageSize = value.toString();
      await this.handleTableChange();
    },
    async handleTableChange(pagination) {
      this.loading = true;
      if (pagination != null) this.pagination.current = pagination.current
      await this.searchIpAddress();
      this.loading = false;
    },
    async searchIpAddress() {
      let _this = this;
      if (this.pagination.current == null) this.pagination.current = 1;
      let data={
        current: this.pagination.current,
        size: this.pagination.pageSize,
        ...this.search
      }
      for (let dataKey in data) {
        if(data[dataKey]==null){
          delete data[dataKey]
        }
      }
      await searchGoodDataByPage(data).then((res) => {
        if (res.status === 200) {
          _this.data = res.data.records
          _this.pagination.total = res.data.total
          _this.pagination.current = res.data.current
          _this.pagination.pageSize = res.data.size.toString()
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      });
    },
    onBeforeTimeChange(value) {
      if(value==null){
        this.search.before=null;
        return;
      }
      if(this.search.after!=null){
        if(Date.parse(this.search.after)>=Date.parse(value)){
          this.search.before=value
        }else{
          this.$notification.warning({
            message:'起始时间应小于等于终止时间'
          })
        }
      }else {
        this.search.before=value
      }
    },
    onAfterTimeChange(value) {
      if(value==null){
        this.search.after=null;
        return;
      }
      if(this.search.before!=null){
        if(Date.parse(this.search.before)<=Date.parse(value)){
          this.search.after=value
        }else{
          this.$notification.warning({
            message:'终止时间应大于等于起始时间'
          })
        }
      }else {
        this.search.after=value
      }
    },
    getExcel(){
      let url=process.env.VUE_APP_API_BASE_URL+'goodData/data/excel?'
      for (let searchKey in this.search) {
        if(this.search[searchKey]!=null&&this.search[searchKey].toString().length>0){
          url+=searchKey+'='+this.search[searchKey].toString()+'&'
        }
      }
      window.open(url);
    }
  }
}
</script>

<style scoped>

</style>